So im getting the classic "Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension." error in the console. The problem is that I believe it is actually properly listed, since it works everywhere, except this site for some reason: https://raw.githubusercontent.com/InventivetalentDev/minecraft-assets/1.18.2/assets/minecraft/textures/block/dirt.png
Here are the relating parts of my files (I am using manifest v3):
manifest.json
"web_accessible_resources": [
{
"resources": ["content.css", "sprite.svg"],
"matches": ["<all_urls>"]
}
],
"content_scripts":
[{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"run_at": "document_start"
}]
content-script.js
function injectCSS() {
const link = newElement('link');
const head = $('head');
link.rel = 'stylesheet';
link.type = "text/css"
link.href = chrome.runtime.getURL('content.css');
head.appendChild(link);
}
So, for anyone findig this question while looking for a solution for this problem in the future:
The reason this happens is that this site has a strict content policy, disallowing all resources (e.g. image or stylesheet) coming outside itself. There is 2 ways to solve this issue:
1. Easy and quick solution
manifest.json
"content_scripts":[ { "js": ["content-script.js"], "css": ["style.css"], "matches": ["https://stackoverflow.com/*"] } ]
2. A hacky workaround I've learned from scripts
content-script.js
window.addEventListener('load', function() { injectCSS(); }) function injectCSS() { const style = document.createElement('style'); const head = document.querySelector('head'); style.rel = 'stylesheet'; style.type = "text/css" style.textContent = css; head.appendChild(style); } const css = ` ::-webkit-scrollbar { display: none; } `